<template>
  <div class="overflow-auto" ref="scrollContainer">
    <div class="bg-one-map bg-cover w-[3840px] h-[2160px] flex flex-col">
      <div class="bg-top-banner bg-cover w-full h-[164px] flex justify-center">
        <div class="pt-8 text-6xl text-center text-white shadow-lg">全厂物流一张图</div>
      </div>
      <div class="flex-1 mx-10 mt-6">
        <div class="flex h-[1060px]">
          <!-- 采购物流数据 -->
          <div class="w-[1360px]">
            <PurchaseLogisticsData />
          </div>
          <!-- 每日进厂物料 -->
          <div class="flex-1 ml-16">
            <DailyIncomingMaterials />
          </div>
        </div>
        <div class="flex h-[784px] mt-14">
          <!-- 近期预计进厂 -->
          <div class="w-[1360px] h-[784px]">
            <UpcomingFactoryArrivals />
          </div>
          <!-- 采购待发运量 -->
          <div class="flex-1 ml-16">
            <PendingDispatchVolume />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import PurchaseLogisticsData from './components/PurchaseLogisticsData.vue';
import DailyIncomingMaterials from './components/DailyIncomingMaterials.vue';
import UpcomingFactoryArrivals from './components/UpcomingFactoryArrivals.vue';
import PendingDispatchVolume from './components/PendingDispatchVolume.vue';
import { ref, onMounted, onUnmounted } from 'vue';

const scrollContainer = ref<HTMLDivElement | null>(null);

let isDown = false;
let startX = 0;
let scrollLeft = 0;
let startY = 0;
let scrollTop = 0;

const handleMouseDown = (e: MouseEvent) => {
  const container = scrollContainer.value!;
  isDown = true;
  startX = e.pageX;
  startY = e.pageY;
  scrollLeft = container.scrollLeft;
  scrollTop = container.scrollTop;
  container.style.cursor = 'grabbing';
};

const handleMouseLeave = () => {
  const container = scrollContainer.value!;
  isDown = false;
  container.style.cursor = 'grab';
};

const handleMouseUp = () => {
  const container = scrollContainer.value!;
  isDown = false;
  container.style.cursor = 'grab';
};

const handleMouseMove = (e: MouseEvent) => {
  const container = scrollContainer.value!;
  if (!isDown) return;
  e.preventDefault();
  const x = e.pageX;
  const walk = x - startX;
  container.scrollLeft = scrollLeft - walk;
  const y = e.pageY;
  const walkY = y - startY;
  container.scrollTop = scrollTop - walkY;
};

onMounted(() => {
  const container = scrollContainer.value!;
  container.addEventListener('mousedown', handleMouseDown);
  container.addEventListener('mouseleave', handleMouseLeave);
  container.addEventListener('mouseup', handleMouseUp);
  container.addEventListener('mousemove', handleMouseMove);
});

onUnmounted(() => {
  const container = scrollContainer.value;
  if (!container) return;
  container.removeEventListener('mousedown', handleMouseDown);
  container.removeEventListener('mouseleave', handleMouseLeave);
  container.removeEventListener('mouseup', handleMouseUp);
  container.removeEventListener('mousemove', handleMouseMove);
});
</script>

<style lang="scss" scoped>
.overflow-auto::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #04173a;
}

.overflow-auto::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
}
.overflow-auto::-webkit-scrollbar-corner {
  background: #04173a;
}
</style>
